<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-08-15 19:06:39
 * @LastEditTime: 2023-08-16 19:20:20
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \htmld:\Developer\WGJ\VSCode_WorkSpace\Web\vue\vue-basic\16-自定义指令\1.自定义指令.html
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>自定义指令</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
            需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其绑定的input元素默认获取焦点
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>{{name}}</h2>
            <h2>当前的n值是：<span v-text="n"></span></h2>
            <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2> -->
            <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>
            <hr />
            <input type="text" v-fbind:value="n" />
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        // 定义全局指令
        // Vue.directive('fbind', {
        //     // 指令与元素成功绑定时（一上来）
        //     bind(element, binding) {
        //         // console.log('big', this); // 注意此处的this是window
        //         element.value = binding.value;
        //     },
        //     // 指令所在元素被插入页面时
        //     inserted(element, binding) {
        //         element.focus();
        //     },
        //     // 指令所在的模板被重新解析时
        //     update(element, binding) {
        //         bind(element, binding);
        //         inserted(element, binding);
        //     },
        // });

        // Vue.directive('big', function (element, binding) {
        //     // console.log('big', this); // 注意此处的this是window
        //     element.innerHTML = binding.value * 10;
        // });

        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                n: 1,
            },
            directives: {
                // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时
                // 'big-number'(element, binding) {
                //     element.innerHTML = binding.value * 10;
                // },
                big(element, binding) {
                    // console.log('big', this); // 注意此处的this是window
                    element.innerHTML = binding.value * 10;
                },
                fbind: {
                    // 指令与元素成功绑定时（一上来）
                    bind(element, binding) {
                        element.value = binding.value;
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus();
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        bind(element, binding);
                        inserted(element, binding);
                    },
                },
            },
        });
    </script>
</html>
